<template>
    <page-wrap @click="ckcDown">
        <my-header txt="返回" backUrl="/">
            <span v-if="carDetail.id">执行操作界面还剩 
                <b style="color: #ff896b;">
                    <count-down ref="cdNumber" :time="carDetail.screenSeconds || 120" @over="closeMain"/>
                </b> 
                秒，即将退出操作返回首页
            </span>
        </my-header>
        <section class="mainBox wrapfix">
            <div class="leftBox"><img class="mIng" src="/images/m1.png"/></div>
            <div class="centerBox">
                <div class="centerTop"><img class="mIng" src="/images/m2.png"/></div>
                <div class="centerBottom">
                    <index-data/>
                </div>
            </div>
            <div class="rightBox">
                <div class="rtItem" @click="goDo(1)"><img class="mIng" src="/images/m3.png"/></div>
                <div class="rtItem" style="margin-top: 20px;" @click="goDo(2)"><img class="mIng" src="/images/m4.png"/></div>
                <a @click.stop="goPage" to="/pay" class="rtItem" style="margin-top: 24px;"><img class="mIng" src="/images/m5.png"/></a>
            </div>
        </section>
        <my-dailog v-model:show="showFlag">
            <Deposit v-if="opType==1"/> <!--存放-->
            <Pickup v-else-if="opType==2"/><!--取件-->
        </my-dailog>
    </page-wrap>
</template>

<script>
import {reactive,toRefs,onMounted,provide,getCurrentInstance,computed} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {useStore} from 'vuex'
import pageWrap from '@/components/pageWrap.vue'
import myHeader from '@/components/myHeader.vue'
import indexData from './components/indexData.vue'
import myDailog from '@/components/myDailog.vue'
import Deposit from './components/deposit/index.vue'
import Pickup from './components/pickup/index.vue'
import countDown from '@/components/countDown.vue'
export default {
    components:{
        pageWrap,
        myHeader,
        indexData,
        myDailog,
        Deposit,
        Pickup,
        countDown
    },
    setup() {
        const store = useStore()
        const router = useRouter(), route = useRoute();

        const {proxy} = getCurrentInstance()
        
        const state = reactive({
            showFlag:false,
            opType:1,  // 1为存放，2为取件
            st:'',
            carDetail:computed(()=>store.state.carDetail)
        }) 

        provide('close',()=>{state.showFlag=false})  // 想后代传递关闭弹窗方法

        onMounted(() =>{
            console.log("OOOO",state.carDetail)
        })
        
        const goDo = type=>{
            
           state.opType =  type
           state.showFlag = true
        }

        const closeMain = ()=>{
            router.push('/')
        }

        const ckcDown = ()=>{  // 监听页面是否操作
            clearTimeout(state.st)
            proxy.$refs.cdNumber.stopCountDown() // 停止倒计时
            // 10秒操作页面就重新计时
            state.st=setTimeout(() =>{
                proxy.$refs.cdNumber.startCountDown()  // 开始倒计时
            },10000)
        }

        const goPage = ()=>{
            router.push('/pay')
        }

        return {
            ...toRefs(state),
            goDo,
            closeMain,
            ckcDown,
            goPage
        }

    },
}
</script>

<style lang="scss" scoped>
    .mainBox{
        padding: 20px;
        .mIng{
            display: block;
            width: 100%;
            height: 100%;
        }
        .leftBox{
            float: left;
            display:inline;
            width: 499px;
            height: 930px;  
        }
        .centerBox{
            width: 910px;
            float: left;
            display:inline;
            margin:0 0 0 15px;
            .centerTop{
                width: 100%;
                height: 622px;
                overflow: hidden;
            }
            .centerBottom{
                width: 100%;
                height: 297px;
                background: url(/images/cbg.png) left top no-repeat;
                background-size: 100% 100%;
                margin: 15px 0 0 0;
            }
        }
        .rightBox{
            float: left;
            display:inline;
            width: 441px;
            margin: 0 0 0 15px;
            .rtItem{
                display: block;
                width: 100%;
                height: 297px;
                margin: 0;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
</style>